<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>首页</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <h1 class="mui-title">Coffee</h1>
	</header>
	<nav class="mui-bar mui-bar-tab" id='bottom-tabs'>
	    <a class="mui-tab-item mui-active">
	        <span class="mui-icon mui-icon-home"></span>
	        <span class="mui-tab-label">首页</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-location"></span>
	        <span class="mui-tab-label">位置</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-email"></span>
	        <span class="mui-tab-label">上传</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-gear"></span>
	        <span class="mui-tab-label">设置</span>
	    </a>
	</nav>
</body>
<script type="text/javascript" charset="utf-8">
   (function($,doc){
   		$.init();//初始化
   		var subpages=['views/home.html','views/news.html','views/discover.html','views/my.html'],
   			styles={
   				top:'46px',
   				bottom:'51px'
   			},
   			tabs=$('.mui-tab-item');//按钮选定
   			console.log(tabs[0]);
   			var reg=/\w+\/(\w+)\.html$/;//正则表达式
   			//console.log(subpages[0].replace(reg,'$1'));
   		
   		$.plusReady(function(){
   			// 0.给底部导航条设置高度定位，以防输入法挤压
   			var appHeight=plus.display.resolutionHeight-50;
   			console.log(appHeight);//716
   			//用top值来定位底部的导航
   			$('#bottom-tabs')[0].style.top=appHeight+'px';
   			//1、先检查是否登录
   			//plus.storage.setItem('login','yes');
   			initViews();
   			if(!plus.storage.getItem('login')){
   				//2、若无登录，弹出登录页
   				var loginVW=plus.webview.create('views/login.html','login');
   				loginVW.show('slide-in-bottom',500);
   			}
   			//else{
   				//2、若已经登录，初始化主页面
   			//}
   			
   		});
   		
   		function initViews(){
   			console.log(23);
   			var curr=plus.webview.currentWebview();//返回当前加载的webview
   			var subVW=[];//定义一个数组
   			for(var i=0,len=subpages.length;i<len;i++){
   				//循环选项卡
   				var sub=plus.webview.create(subpages[i],subpages[i].replace(reg,'$1'),styles);//3个参数
   				subVW.push(sub);
   				curr.append(sub);//jq基础，在当前节点后添加节点
   				sub.hide();//隐藏
   			}
   			subVW[0].show();
   			//console.log(plus.webview.all()[1].id);
   			for(var i=0,len=tabs.length;i<len;i++){
   				(function(i){//通过闭包把变量i保存下来
   					tabs[i].addEventListener('tap',function(){
   						//console.log(i+1);//点击下标显示相应的下标数字
   						$.each(subVW,function(i,e){//回调函数,先i,后e
   							e.hide();
   						})
   						subVW[i].show();
   					});
   				})(i);
   			}
   		}
   })(mui,document);
</script>
</html>